<template>
  <view class="search_details">
    <navigation :delta="1"></navigation>
    <view class="search_header">
      <view class="search">
        <u-search
          :show-action="false"
          v-model="searchValue"
          input-align="center"
          :focus="true"
          placeholder="请输入歌手或者歌曲名"
          @change="change_search"
          @search="search"
        ></u-search>
      </view>
    </view>
    <view class="search_body">
      <view class="search_hot_box" v-if="hotShow">
        <view class="hot_box">
          <view class="hot_tags">热搜榜</view>
          <view class="hot_list">
            <view style="width: 100%; height: 30rpx"></view>
            <view
              class="hot_item"
              v-for="(item, index) in hot_list.slice(0, hot_length)"
              :key="index"
              @click="hotSearch(hot_list[index])"
            >
              <view class="index">{{ index + 1 }}</view>
              <text class="name">{{ item.searchWord }}</text>
            </view>
            <view class="hot_gengduo" v-show="gengduoShow" @click="gengduo"
              >查看更多</view
            >
            <view style="width: 100%; height: 30rpx"></view>
          </view>
        </view>
      </view>
      <view class="search_hot_tabs" v-if="tabsShow">
        <u-tabs
          :list="list"
          :is-scroll="true"
          :current="current"
          @change="change_tabs"
          active-color="rgb(236,65,65)"
        ></u-tabs>
      </view>
      <view
        class="search_content"
        @touchstart="handeltouchstart"
        @touchend="handeltouchend"
        v-if="contentShow"
      >
        <view v-if="current == 0" class="search_synthesis">
          <!-- 单曲 -->
          <view class="synthesis_single">
            <view class="single_header">
              <view class="title">单曲</view>
            </view>
            <view class="single_list">
              <view
                class="single_item"
                v-for="(item, index) in synthesis.song.songs"
                :key="index"
                @click="checkPlayItem(item)"
              >
                <view style="width: 80%; margin-left: 20rpx">
                  <view
                    style="width: 100%; font-size: 30rpx; margin-bottom: 4rpx"
                  >
                    {{ item.name }}
                  </view>
                  <view style="width: 100%; font-size: 20rpx; color: #808080">
                    {{ item.ar[0].name }}&nbsp;&nbsp;-&nbsp;&nbsp;{{
                      item.al.name
                    }}
                  </view>
                </view>
                <view style="display: flex; align-items: center">
                  <text
                    v-if="item.mv != 0"
                    style="font-size: 45rpx"
                    class="iconfont icon-shipinbofang"
                  ></text>
                  <text
                    style="font-size: 45rpx; position: absolute; right: 50rpx"
                    class="iconfont icon-androidgengduo"
                  ></text>
                </view>
              </view>
            </view>
          </view>
          <!-- 歌单 -->
          <view class="synthesis_songs">
            <view class="songs-header">
              <view class="title">歌单</view>
            </view>
            <view class="songs-list">
              <view
                v-for="(item, index) in synthesis.playList.playLists"
                :key="index"
              >
                <navigator
                  class="songs-item"
                  :url="'/components/play_details/index?id=' + item.id"
                >
                  <view style="width: 20%">
                    <image :src="item.coverImgUrl" mode="widthFix"></image>
                  </view>
                  <view style="width: 80%">
                    <view class="">
                      {{ item.name }}
                    </view>
                    <view class="">
                      {{ item.trackCount }}首,by &nbsp;{{
                        item.creator.nickname
                      }},播放{{ item.playCount }}次
                    </view>
                  </view>
                </navigator>
              </view>
            </view>
            <view class="songs-more">
              <view>{{ synthesis.playList.moreText }}></view>
            </view>
          </view>
          <!-- 视频 -->
          <view class="synthesis_video" v-if="false">视频</view>
          <view class="synthesis_singer"  v-if="false">歌手</view>
          <view class="synthesis_albums"  v-if="false">专辑</view>
          <view class="synthesis_users"  v-if="false">用户</view>
        </view>
        <view v-if="current == 1" class="search_">单曲</view>
        <view v-if="current == 2" class="search_">歌单</view>
        <view v-if="current == 3" class="search_">视频</view>
        <view v-if="current == 4" class="search_">歌手</view>
        <view v-if="current == 5" class="search_">专辑</view>
        <view v-if="current == 6" class="search_">用户</view>
      </view>
    </view>
    <play></play>
    <play-popup></play-popup>
  </view>
</template>

<script>
import navigation from "../navigation/indexc.vue";
export default {
  components: { navigation },
  data: () => ({
    searchValue: "",
    hot_list: [],
    hotShow: false,
    tabsShow: false,
    hot_length: 0,
    gengduoShow: true,
    headerShow: false,
    list: [
      {
        name: "综合",
        type: 1018,
      },
      {
        name: "单曲",
        type: 1,
      },
      {
        name: "歌单",
        type: 1000,
      },
      {
        name: "视频",
        type: 1014,
      },
      {
        name: "歌手",
        type: 100,
      },
      {
        name: "专辑",
        type: 10,
      },
      {
        name: "用户",
        type: 1002,
      },
    ],
    current: 0,
    //按下的时间
    startTime: 0,
    //按下的坐标
    startX: 0,
    startY: 0,
    //离开的时间
    endTime: 0,
    //滑动方向
    direction: "",
    //综合数据
    synthesis: {
      song: {},
      playList: {},
    },
    contentShow: false,
  }),
  computed: {},
  methods: {
    //当用户触发搜索后的事件
    search() {
      this.getSearch(this.searchValue);
      this.hotShow = false;
      this.tabsShow = true;
    },
    //输入框的值发生变化的时候触发的事件
    change_search() {},
    //搜索事件
    getSearch(data) {
      this.contentShow = false;
      uni.showLoading({
        title: "加载中",
        icon: "none",
      });
      let opt = {
        url: "/search",
        method: "get",
      };
      let params = {
        keywords: data,
        type: this.list[this.current].type,
      };
      this.$request.get(opt, params).then((res) => {
        if (res.statusCode === 200) {
          uni.hideLoading();
          // console.log(res.data.result);
          this.synthesis.song = res.data.result.song;
          this.synthesis.playList = res.data.result.playList;
          this.contentShow = true;
          // console.log(this.synthesis.song);
        } else {
          uni.hideLoading();
          uni.showToast({
            title: "搜索失败,请稍后重试!",
            duration: 2000,
            icon: "none",
          });
        }

        // console.table(res.data.result.songs);
      });
    },
    //获取热搜榜
    getHotList() {
      let opt = {
        url: "/search/hot/detail",
        method: "get",
      };
      let params = {};
      this.$request.get(opt, params).then((res) => {
        this.hot_list = res.data.data;
        this.hot_length = this.hot_list.length / 2;
        this.hotShow = true;
      });
    },
    gengduo() {
      this.hot_length = this.hot_list.length;
      this.gengduoShow = false;
    },
    //热搜榜hot_item点击事件
    hotSearch(value) {
      this.searchValue = value.searchWord;
      this.search();
    },
    change_tabs(index) {
      this.current = index;
    },
    //按下屏幕事件
    handeltouchstart(event) {
      this.startTime = Date.now();
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientX;
    },
    //离开屏幕事件
    handeltouchend(event) {
      const endTime = Date.now();
      const endstarX = event.changedTouches[0].clientX;
      const endstarY = event.changedTouches[0].clientY;
      //判断时间
      if (endTime - this.startTime > 4000) {
        return;
      }
      //滑动方向
      let direction = "";
      //判断方向
      if (Math.abs(endstarX - this.startX) > 50) {
        direction = endstarX - this.startX > 0 ? "right" : "left";
      } else {
        return;
      }
      this.direction = direction;
      this.endTime = endTime;
      // console.log(direction)
    },
    checkPlayItem(item) {
      this.util.checkPlayItem(item);
    },
  },
  watch: {
    searchValue() {
      if (this.searchValue.length === 0) {
        this.hotShow = true;
        this.tabsShow = false;
        this.contentShow = false;
      }
    },
    //监听滑动方向
    endTime() {
      if (this.direction === "left") {
        this.current === this.list.length - 1
          ? (this.current = this.list.length - 1)
          : this.current++;
        return;
      }
      if (this.direction === "right") {
        this.current === 0 ? (this.current = 0) : this.current--;
        return;
      }
    },
    current() {
      this.search();
    },
  },
  mounted() {
    this.getHotList();
    setTimeout(() => {
      this.headerShow = true;
    }, 500);
    // this.search();
  },
  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  // 页面处理函数--监听用户上拉触底
  onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  /* onPageScroll(event) {}, */
  // 页面处理函数--用户点击右上角分享
  /* onShareAppMessage(options) {}, */
};
</script>

<style lang="scss" scoped>
.search_details {
  /* #ifdef MP-WEIXIN */
  margin-top: 70rpx;
  /* #endif */
  width: 100%;
  height: 100vh;

  //页面动画会影响效果
  .search_header {
    background: #fff;
    height: 110rpx;
    position: fixed;
    z-index: 98;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .search {
      margin-top: 40rpx;
      padding-bottom: 40rpx;
      width: 80%;
    }
  }

  .search_body {
    margin-top: 110rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .search_hot_box {
      margin-top: 20rpx;
      width: 100%;
      display: flex;
      justify-content: center;

      .hot_box {
        width: 95%;
        .hot_tags {
          width: 100%;
          height: 50rpx;
          display: flex;
          align-items: center;
        }

        .hot_list {
          margin-top: 20rpx;
          width: 100%;
          background-color: #fff;
          border-radius: 15rpx;
          box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px,
            rgba(0, 0, 0, 0.05) 0px 5px 10px;

          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .hot_item {
            margin: 6rpx;
            flex: 38%;
            height: 40rpx;
            display: flex;

            .index {
              margin-left: 15rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 30rpx;
              height: 100%;
            }

            .name {
              width: 250rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-left: 20rpx;
            }
          }

          .hot_item:nth-child(2) {
            .index {
              color: red;
            }
          }

          .hot_item:nth-child(3) {
            .index {
              color: red;
            }
          }

          .hot_item:nth-child(4) {
            .index {
              color: red;
            }
          }

          .hot_gengduo {
            margin-top: 10rpx;
            width: 100%;
            text-align: center;
          }
        }
      }
    }

    .search_hot_tabs {
      width: 100%;
      position: fixed;
      top: 110rpx;
      z-index: 99;
    }

    .search_content {
      width: 100%;
      margin-top: 70rpx;
		height: 100vh;
      .search_synthesis {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
		padding-bottom: 140rpx;
        .synthesis_single {
          background-color: #fff;
          display: flex;
          align-content: flex-start; //侧轴
          justify-content: center;
          flex-wrap: wrap;

          .single_header {
            width: 92%;
            height: 80rpx;
            border-bottom: 1rpx solid rgb(202, 202, 202);

            .title {
              margin-top: 25rpx;
              font-size: 30rpx;
              font-weight: 900;
            }
          }

          .single_list {
            width: 92%;

            .single_item {
              display: flex;
              align-items: center;
              width: 100%;
              padding-top: 15rpx;
              padding-bottom: 15rpx;
              // font-size: 20rpx;
              flex-wrap: wrap;
              // background-color: red;
              // height:95rpx;
              margin-bottom: 10rpx;
              border-bottom: 1rpx solid rgb(202, 202, 202);
            }

            .single_item:last-child {
              margin-bottom: 20rpx;
              border: none;
            }
          }
        }

        .synthesis_songs {
          background-color: #fff;
          display: flex;
          align-content: flex-start; //侧轴
          justify-content: center;
          flex-wrap: wrap;

          .songs-header {
            width: 92%;
            height: 80rpx;
            // border-bottom: 1rpx solid rgb(202, 202, 202);

            .title {
              margin-top: 25rpx;
              font-size: 30rpx;
              font-weight: 900;
            }
          }
          .songs-list {
            width: 92%;
            .songs-item {
              display: flex;
              align-items: center;
              width: 100%;
              padding-top: 15rpx;
              flex-wrap: wrap;
              // margin-bottom: 5rpx;

              view:nth-child(1) {
                image {
                  border-radius: 10rpx;
                  width: 100rpx;
                  height: 100rpx;
                }
              }
              view:nth-child(2) {
                view:nth-child(1) {
                  width: 90%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  margin-bottom: 10rpx;
                  color: #333;
                }

                view:nth-child(2) {
                  font-size: 15rpx;
                  color: $uni-text-color-placeholder;
                }
              }
            }
            .songs-item:last-child {
              margin-bottom: 20rpx;
              border: none;
            }
          }
          .songs-more {
            border-top: 0.5rpx solid rgb(202, 202, 202);
            width: 100%;
            height: 90rpx;
            view {
              display: flex;
              align-items: center;
              justify-content: center;
              color: $uni-text-color-placeholder;
              height: 100%;
            }
          }
        }

        .synthesis_video {
        }

        .synthesis_singer {
        }

        .synthesis_albums {
        }

        .synthesis_users {
          margin-bottom: 140rpx;
        }
      }

      .search_synthesis > view {
        margin-top: 30rpx;
        width: 95%;
        // height: 500rpx;
        background-color: #fff;
        border-radius: 25rpx;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
          rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px,
          rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px,
          rgba(0, 0, 0, 0.07) 0px 32px 64px;
      }

      // background-color: red;
    }
  }
}
</style>
